<template>
  <div class="orderimport">
    <!-- 会员查询条件 -->
    <div style="display: flex; margin: 0 0 10px 0">
      <el-form
        ref="members"
        :model="ruleForm"
        size="mini"
        style="display: flex"
      >
        <el-form-item label="姓名" style="display: flex; margin: 0 30px 0 0">
          <el-input v-model="ruleForm.customerName" @blur="insert($event)"></el-input>
        </el-form-item>
        <el-form-item label="手机" style="display: flex; margin: 0 30px 0 0">
          <el-input v-model="ruleForm.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="卡号" style="display: flex; margin: 0 30px 0 0">
          <el-input v-model="ruleForm.customerCard"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 去程 -->
    <div style="margin: 40px 0 0 0">
      <div>
        <span style="margin: 0 20px 0 0; font-weight: 900">去程:</span>
      </div>
      <div>
        <el-form :model="outbound" :rules="rules" ref="ruleForm" size="mini" class="demo-ruleForm" >
          <div style="display:flex;">
              <el-form-item label="航司" style="display:flex;">
                <el-input v-model="outbound.airline"></el-input>
              </el-form-item>
               <el-form-item label="出发地航站楼"  style="display:flex;">
                <el-input v-model="outbound.setOff"></el-input>
              </el-form-item>
               <el-form-item label="到达地航站楼" style="display:flex;">
                <el-input v-model="outbound.arrive"></el-input>
              </el-form-item>
               <el-form-item label="航班号"  style="display:flex;">
                <el-input v-model="outbound.flightNumber"></el-input>
              </el-form-item>
          </div>
             <div style="display:flex;">
                <el-form-item label="起飞时间" style="display:flex;">
                 <el-date-picker
                    v-model="outbound.departureTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-form-item>
               <el-form-item label="到达时间"  style="display:flex;">
                 <el-date-picker
                    v-model="outbound.arrivalTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-form-item>
               <el-form-item label="舱位"  style="display:flex;">
                <el-input v-model="outbound.position"></el-input>
              </el-form-item>
             </div>
              
        </el-form>
      </div>
      <!-- <div style="margin: 10px 0 0 0">
        <i class="el-icon-circle-plus" style="color: #12bf6a"></i>
        <span>添加行程</span>
      </div> -->
    </div>
    <!-- 回程 -->
    <div style="margin: 40px 0 0 0" v-for="(item,index) in journey" key="index">
      <div style="display:flex">
        <span style="margin: 0 20px 0 0; font-weight: 900">回程:</span>
        <!-- <span style="color: #ea2112">pnr|pnr内容获取的行程不能修改</span> -->
      </div>
      <div >
          <div style="display:flex;" >
              <el-form-item label="航司" style="display:flex;">
                <el-input v-model="item.airline"></el-input>
              </el-form-item>
               <el-form-item label="出发地航站楼"  style="display:flex;">
                <el-input v-model="item.setOff"></el-input>
              </el-form-item>
               <el-form-item label="到达地航站楼" style="display:flex;">
                <el-input v-model="item.arrive"></el-input>
              </el-form-item>
               <el-form-item label="航班号"  style="display:flex;">
                <el-input v-model="item.flightNumber"></el-input>
              </el-form-item>
          </div>
             <div style="display:flex;">
                <el-form-item label="起飞时间"  style="display:flex;">
                <el-date-picker
                    v-model="item.departureTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-form-item>
               <el-form-item label="到达时间" style="display:flex;">
                 <el-date-picker
                    v-model="item.arrivalTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
              </el-form-item>
               <el-form-item label="舱位"  style="display:flex;">
                <el-input v-model="item.position"></el-input>
              </el-form-item>
             </div>
              
      </div>
      <!-- <div style="margin: 10px 0 0 0">
        <i class="el-icon-circle-plus" style="color: #12bf6a"></i>
        <span>添加行程</span>
      </div> -->
    </div>
    <!-- 乘车人信息循环 -->
    <div >
       <div style="margin: 10px 0 0 0" >
       <div>乘车人信息:</div>
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini" class="demo-ruleForm" v-for="(item,index) in travelerVoList" key='index'>
          <div style="display:flex;">
              <el-form-item label="乘车人姓名" prop="name" style="display:flex;">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
               <el-form-item label="乘车手机号" prop="name" style="display:flex;">
                <el-input v-model="item.phone"></el-input>
              </el-form-item>
               <el-form-item label="乘客证件号" prop="name" style="display:flex;">
                <el-input v-model="item.idno"></el-input>
              </el-form-item>
               <el-form-item label="乘客类型" prop="name" style="display:flex;">
                 <el-select clearable v-model="item.type" placeholder="请选择">
                        <el-option
                          v-for="item in Passengerstype"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
              </el-form-item>
          </div>
             <div style="display:flex;">
                <el-form-item label="性别" prop="name" style="display:flex;">
                  <el-select clearable v-model="item.sex" placeholder="请选择">
                      <el-option
                                v-for="item in gender"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
               <el-form-item label="出生日期" prop="name" style="display:flex;">
                    <el-date-picker
                    v-model="item.birthday"
                    size="mini"
                    style="width: 140px"
                    placeholder="选择日期"
                    :value-format="format"
                  >
                  </el-date-picker>
              </el-form-item>
               <el-form-item label="国籍" prop="name" style="display:flex;">
                <el-select clearable v-model="item.citizenship" placeholder="请选择">
                      <el-option
                                v-for="item in nationality"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
             </div>
              <div style="display:flex;">
                <el-form-item label="证件有效期" prop="name" style="display:flex;">
                    <el-date-picker
                    v-model="item.documentsDate"
                    size="mini"
                    style="width: 140px"
                    placeholder="选择日期"
                    :value-format="format"
                  >
                  </el-date-picker>
              </el-form-item>
               <el-form-item label="乘客证件类型" prop="name" style="display:flex;">
                  <el-select clearable v-model="item.idtype" placeholder="请选择">
                      <el-option
                                v-for="item in mold"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
               <el-form-item label="票号" prop="name" style="display:flex;">
                  <el-input v-model="item.ticketNum"></el-input>
              </el-form-item>
              </div>
        </el-form>
     </div>
    </div>
    <div class="middle">
      <!-- 左边 -->
      <div>
        <div style="display:flex;">
          <div style="margin:3px 10px 0 0;width:200px;">PNR:</div>
          <el-input size="mini"  v-model="ruleForm.pnr" placeholder="请输入PNR">
          </el-input>
        </div>
        <div style="margin:50px 0 0 0;display:flex;">
        <div style="margin:3px 10px 0 0;width:200px;">大编码:</div>
          <el-input size="mini" v-model="ruleForm.coding" placeholder="请输入大编码">
          </el-input>
        </div>
        <div style="margin:50px 0 0 0;display:flex;">
        <div style="margin:3px 10px 0 0;width:200px;">PNR内容消息:</div>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入PNR内容消息"
              v-model="ruleForm.pnrcontent">
            </el-input>
          </el-input>
        </div>
        
        <div style="margin:50px 0 0 0;display:flex;">
        <div style="margin:3px 10px 0 0;width:200px;">退改签规则:</div>
            <el-input
              type="textarea"
              :rows="1"
              placeholder="请输入退改签规则"
              v-model="ruleForm.refundRebook">
            </el-input>
          </el-input>
        </div>
         <div style="margin:50px 0 0 0;display:flex;">
        <div style="margin:3px 10px 0 0;width:200px;">行李规则:</div>
            <el-input
              type="textarea"
              :rows="1"
              placeholder="请输入行李规则"
              v-model="ruleForm.luggage">
            </el-input>
          </el-input>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <div>销售价格:</div>
        <div>
           <div style="margin:50px 0 0 0;display:flex;">
        <div style="margin:3px 10px 0 0;width:200px;">成人销售价格:</div>
          <!-- <el-input size="mini"  placeholder="请输入大编码"> -->
            <el-input
              placeholder="请输入成人销售价格"
              v-model="ruleForm.aldultPrice">
            </el-input>
          </el-input>
        </div>
         <div style="margin:50px 0 0 0;display:flex;">
        <div style="margin:3px 10px 0 0;width:200px;">儿童销售价格:</div>
          <!-- <el-input size="mini"  placeholder="请输入大编码"> -->
            <el-input
              placeholder="请输入儿童销售价格"
              v-model="ruleForm.childPrice">
            </el-input>
          </el-input>
        </div>
         <div style="margin:50px 0 0 0;display:flex;">
        <div style="margin:3px 10px 0 0;width:200px;">婴儿销售价格:</div>
          <!-- <el-input size="mini"  placeholder="请输入大编码"> -->
            <el-input
              placeholder="请输入婴儿销售价格"
              v-model="ruleForm.babyPrice">
            </el-input>
          </el-input>
        </div>
         <div style="margin:50px 0 0 0;display:flex;">
        <div style="margin:3px 10px 0 0;width:150px;">最晚出票时间:</div>
          <!-- <el-input size="mini"  placeholder="请输入大编码"> -->
           <el-date-picker
              :value-format="format"
                placeholder="选择最晚出票时间"
              v-model="ruleForm.latestTicketingTime"
              type="date"
            >
            </el-date-picker>
          </el-input>
        </div>
        </div>
      </div>
    </div>
    <!-- 发票信息 -->
    <div>发票信息</div>
    <div >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini">
        <div style="display:flex">
            <el-form-item label="发票抬头" style="display:flex;">
          <el-input v-model="ruleForm.Invoice"></el-input>
        </el-form-item>
         <el-form-item label="手机" prop="phone" style="display:flex;">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        </div>
         <div style="display:flex" >
            <el-form-item label="电子邮箱" prop="email" style="display:flex;">
          <el-input v-model="ruleForm.Email"></el-input>
        </el-form-item>
         <el-form-item label="发票金额" prop="amount" style="display:flex;">
          <el-input v-model="ruleForm.InvoiceAmount"></el-input>
        </el-form-item>
         <el-form-item label="联系人" prop="contactName" style="display:flex;">
          <el-input v-model="ruleForm.contact"></el-input>
        </el-form-item>
         <el-form-item label="纳税人识别号" prop="number" style="display:flex;">
          <el-input v-model="ruleForm.coordinatesgd"></el-input>
        </el-form-item>
         </div>
    </el-form>
    </div>

  <div style="margin:30px 0 0 45% ;">
    <el-button size="medium" @click="uploadticket">返回</el-button>
  </div>
  </div>
</template>

<script>
export default {
  name: "orderimport",
  data() {
    return {
      ticketid:"",
      // 手动输入数组
      Passengerinformation:[
        {
          name:"",
          type:"",
          sex:"",
          birthday:"",
          citizenship:"",
          phone:"",
          documentsDate:"",
          idno:"",
          idtype:"",
          ticketNum:""
        }
      ],
      // 发票类型
      radioinvoice:'personal',
      radioinvoiceListType:"",
      // 去程
      outbound:{
        airline:"",
        setOff:"",
        arrive:"",
        flightNumber:"",
        departureTime:"",
        arrivalTime:"",
        position:""
      },
      // 返程
       journey:[],
      // 乘机人信息
      travelerVoList:[],
      // 国籍
       nationality: [
        {
          value: "中国",
          label: "中国",
        },
        {
          value: "香港",
          label: "香港",
        },
      ],
      // 证件类型
         mold: [
        {
          value: "ID_CARD",
          label: "身份证",
        },
        {
          value: "MILITARY_ID",
          label: "军人证",
        },
        {
          value: "PASSPORT",
          label: "护照",
        },
        {
          value: "MTPFHKAMR",
          label: "港澳居民来往内地通行证",
        },
        {
          value: "MTPFTR",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "RPFHKMATR",
          label: "港澳台居民居住证",
        },
        {
          value: "PRICFF",
          label: "外国人永久居留身份证",
        },
        {
          value: "HKAMP",
          label: "港澳通行证",
        },
        {
          value: "ACCOUNT_BOOK",
          label: "户口本",
        },
        {
          value: "BIRTH_CERTIFICATE",
          label: "出生证明",
        },
        {
          value: "TAIWAN_PASS",
          label: "台湾通行证",
        },
      ],
      // 性别
      gender:[
         {
          value: 'male',
          label: '男'
        },
        {
          value: 'female',
          label: '女'
        },
      ],
      // 乘客类型
      Passengerstype:[
        {
          value: '成人',
          label: '成人'
        },
        {
          value: '儿童',
          label: '儿童'
        },
      ],
      // 校验
      rules: {
        name: [{ required: true, message: "请输入发票抬头", trigger: "blur" }],
      },
      // 基本数据
      ruleForm: {
        coding:"",
        pnr:"",
        aldultPrice:"",
        childPrice:"",
        babyPrice:"",
        latestTicketingTime:"",
        whetherBill:"",
        refundRebook:"",
        luggage:"",
        // 发票信息
        Invoice:"",
        Email:"",
        InvoiceAmount:"",
        contact:"",
        phone:"",
        PassengerinList:{},
        invoiceType:"",
        coordinatesgd:"",

      },
      changeradioList: "2",
      textarea: "",
      radio: "2",
      format: "yyyy-MM-dd",
      tableData: [],
      orderquery: {},
      // 会员信息查询
      members: {
        customerName: "",
        customerCard: "",
        customerPhone: "",
      },
    };
  },
  methods: {
    // 返回按钮
    uploadticket(){
         this.$router.push({ name: "iflightOrder", 
       });
    },
    // 详情
     getselectIflightPassengerById() {
      this.$axios
        .getselectIflightPassengerById({
          id:this.ticketid
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
           this.ruleForm=res.data
           this.outbound=this.ruleForm.pnrVo.outbound[0]
           console.log(this.outbound)
            this.journey=this.ruleForm.pnrVo.journey
            this.travelerVoList=this.ruleForm.pnrVo.travelerVoList
          } else {
            this.$message({
              message: "输入信息不正确，请核对后重新查询",
              type: "warning",
            });
          }
        });
    },
  },
  mounted() {
        // 订单id
    this.ticketid = this.$route.params.ticketid;
    console.log(this.ticketid);
    // 机票详情
    this.getselectIflightPassengerById()

  },
};
</script>

<style scoped>
.orderimport {
  margin: 20px;
}
.middle {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.right {
  margin-right: 50px;
  display: flex;
  /* justify-content: space-between; */
}
</style>